<template>
  <div class="user-center-container">
    <div class="aside">
      <div class="user-info">
        <img src="http://dbadmin.ixinkexin.com/uploads/img/20130101/781df63fb6ac26e4aabbf217f20d7c70.png">
        <p>{{userInfo.name}}</p>
      </div>
      <ul class="function-list">
        <li
          v-for="item in functionList"
          :key="item.name"
          @click="handleFunction(item)"
        >
          {{item.name}}
        </li>
        <li @click="toHome">返回首页</li>
        <li @click="logout">退出</li>
      </ul>
    </div>
    <div class="main">
      <component :is="current.component"></component>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import UserInfo from './components/UserInfo.vue';
import FinancialRecords from './components/FinancialRecords.vue';
import AdManage from './components/AdManage.vue';
import EnterpriseManage from './components/EnterpriseManage.vue';
import Discounts from './components/Discounts.vue';
import Recharge from './components/Recharge.vue';

export default {
  name: 'UserCenter',
  components: {
    UserInfo,
    FinancialRecords,
    AdManage,
    EnterpriseManage,
    Recharge
  },
  data() {
    return {
      current: null,
      functionList: [
        { name: '个人信息', component: UserInfo },
        { name: '财务记录', component: FinancialRecords },
        { name: '广告管理', component: AdManage },
        { name: '企业管理', component: EnterpriseManage },
        { name: '优惠活动', component: Discounts },
        { name: '充值', component: Recharge }
      ]
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo || {},
      eventBus: state => state.eventBus
    })
  },
  created() {
    this.jump();
    this.eventBus.$on('recharge', type => {
      this.jump(type);
    });
  },
  methods: {
    jump(type) {
      type = type || this.$route.params.type;
      if (type) {
        this.current = this.functionList.find(item => item.component === Recharge);
      } else {
        [this.current] = this.functionList;
      }
    },
    handleFunction(item) {
      this.current = item;
    },
    toHome() {
      this.$router.push({ name: 'Home' });
    },
    logout() {
      this.$store.commit('LOGOUT');
      this.$store.commit('SHOW_LOGIN', true);
    }
  }
};
</script>

<style lang="less" scoped>
  .user-center-container {
    display: flex;
    .aside {
      flex: 0 0 240px;
      background-color: #d9eae8;
      .user-info {
        margin-bottom: 10px;
        text-align: center;
        color: #297aa3;
      }
      .function-list {
        margin-top: 50px;
        li {
          height: 40px;
          line-height: 40px;
          text-align: center;
          background-color: #bed7d4;
          border-bottom: 1px solid #ddd;
          color: #297aa3;
          cursor: pointer;
          &:hover {
            opacity: .8;
          }
        }
      }
    }
    .main {
      flex: 1;
      overflow: hidden;
    }
  }
</style>
